<script lang="ts">
	import type { RecvApplyJoinRoadmap } from '$lib/api/proto/user_msg_type_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';

	interface Props {
		msg: RecvApplyJoinRoadmap;
		onChange: () => void;
	}
	let props: Props = $props();

	async function allowJoin() {
		if (userStore.userSession == null) {
			return;
		}
		await callApi(
			appStore.roadmapMemberApiClient.allowJoin({
				sessionId: userStore.userSession,
				roadmapId: props.msg.roadmapId,
				applyUserId: props.msg.applyUserId
			}).response
		);
		props.onChange();
	}
</script>

<p>
	用户{props.msg.applyUserDisplayName}申请访问成长路线图
	<button
		type="button"
		class="btn btn-ghost"
		onclick={() => (window.location.href = `/app/roadmap/map?roadmapId=${props.msg.roadmapId}`)}
		>{props.msg.roadmapName}</button
	>。
</p>

<div class="flex justify-end mr-[20px]">
	{#if props.msg.isMember}
		<button type="button" class="btn btn-accent" disabled>已批准</button>
	{:else}
		<button type="button" class="btn btn-accent" onclick={() => allowJoin()}>批准</button>
	{/if}
</div>
